<template>
    <div>
        <div class="container">
            <div class="flex-box">
                <img src="../assets/img/home/promise.png" alt="">
                <div class="item-left">
                 <h2 @click="toAlert">异步与promise ></h2>
              <div class="item-text">
                Promise能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来<br>
                一个 Promise 必然处于以下几种状态之一：
                <li>待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。</li>
                <li>已兑现（fulfilled）: 意味着操作成功完成。</li>
                <li>已拒绝（rejected）: 意味着操作失败</li>
              </div>
             </div>
            </div>
        </div>
        <div class="container-gray">
               <div class="flex-box">
                <div class="item-right">
                <router-link :to="{path:'/prototyHome'}">  <h2>原型链与继承 ></h2></router-link>
              <div class="item-text">
                JavaScript 对象是动态的属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链。
                当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，
                直到找到一个名字匹配的属性或到达原型链的末尾
              </div>
             </div>
            <img src="../assets/img/home/prototy.png" alt="">
            </div>
        </div>
        <div class="container">
            <div class="flex-box">
                <img src="../assets/img/home/event.png" alt="">
                <div class="item-left">
                 <h2 @click="toAlert">事件机制 ></h2>
              <div class="item-text">
                主线程只会做一件事情，就是从消息队列里面取消息、执行消息，再取消息、再执行。当消息队列为空时，就会等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后，才会去取下一个消息。
                这种机制就叫做事件循环机制，取一个消息并执行的过程叫做一次循环。
              </div>
             </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
name:'HomeUseItem',
methods:{
    toAlert(){
        this.$message('本模块还在开发中，先看看原型链部分的内容吧！');
    }
}
}
</script>

<style lang="less" scoped>
a{
    color:inherit;
    text-decoration: none;
}
h2:hover{
    color:#6853da;
}
.container{
    cursor: default;
    width:100%;
    height: 350px;
    padding-top: 50px;
    .flex-box{
        .to-center();
        display: flex;
    }
    .to-center{
        width: 1200px;
        margin: 0 auto;
    }
     .item-left{

        .item-text{
        width: 500px;
        font-size: 20px;
        line-height: 40px;
        }
        }
   img{
            width: 420px;
            height: 300px;
            margin-right: 280px;
        }
}
.container-gray{
     cursor: default;
    background-color: rgb(218, 213, 213);
    width:100%;
    height: 350px;
    padding-top: 50px;
    .flex-box{
        .to-center();
        display: flex;
    }
    .to-center{
        width: 1200px;
        margin: 0 auto;
    }
     .item-right{

        .item-text{
        width: 500px;
        font-size: 20px;
        line-height: 40px;
        }
        }
   img{
            width: 500px;
            height: 300px;
            margin-left: 200px;
        }
}
</style>